/*
 * @Description:
 * @Version: 2.0
 * @Autor: jl.g
 * @Date: 2023-06-14 13:09:28
 * @LastEditors: jl.g
 * @LastEditTime: 2023-07-02 11:14:16
 */
import React, { useState, useRef } from "react";
import { Collapse } from "antd";
import proportion11 from "../../../../../public/assets/imgs/proportion11.svg";
import proportion43 from "../../../../../public/assets/imgs/proportion43.svg";
import proportion44 from "../../../../../public/assets/imgs/proportion44.svg";
import proportion169 from "../../../../../public/assets/imgs/proportion169.svg";
import proportion916 from "../../../../../public/assets/imgs/proportion916.svg";

// mj 模型选择
import mjModelImg from "../../../../../public/assets/imgs/mj.png";
import nijiModelImg from "../../../../../public/assets/imgs/niji.png";
import styles from "./index.module.less";
import GetImgBase64 from "../getImgBase64";
const { Panel } = Collapse;
const MjGenerateSetting = ({
  promptObj,
  generateImgSize,
  generateImgModel,
}) => {
  //   选中的尺寸
  const [selectedSize, setSelectedSize] = useState(generateImgSize.current);
  // 尺寸数据
  const sizeList = useRef([
    {
      label: "1:1",
      id: 1,
      value: " --ar 1:1",
      icon: proportion11,
    },

    {
      label: "4:3",
      id: 2,
      value: " --ar 4:3",
      icon: proportion43,
    },

    {
      label: "4:4",
      id: 3,
      value: " --ar 4:4",
      icon: proportion44,
    },
    {
      label: "16:9",
      id: 4,
      value: " --ar 16:9",
      icon: proportion169,
    },

    {
      label: "9:16",
      id: 5,
      value: " --ar 9:16",
      icon: proportion916,
    },
  ]);

  // 选中的的模型
  const [selectedModel, setSelectedModel] = useState(generateImgModel.current);
  // 模型类型
  const modelList = useRef([
    {
      id: 0,
      title: "MJ",
      info: "通用写实风格MJ",
      value: "",
      icon: mjModelImg,
    },

    {
      id: 1,
      title: "NIJI",
      info: "偏动漫风格、适用于二次元模型",
      value: " --niji 5",
      icon: nijiModelImg,
    },
  ]);

  //   选择尺寸
  const selectSizeItem = (data) => {
    generateImgSize.current = data;
    setSelectedSize(data);
  };
  return (
    <div className={styles.mjGenerateSetting}>
      <div className="setting_box">
        <div className="title">尺寸选择</div>
        <div className="content">
          {sizeList.current.map((v) => (
            <div
              key={v.id}
              onClick={() => selectSizeItem(v)}
              className={`size_setting-item ${
                selectedSize.id === v.id ? "selected_size_setting-item" : ""
              }`}
            >
              <img src={v.icon} alt="" />
              <div>{v.label}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="setting_box-img">
        <div className="title">模型选择</div>

        <div className="content">
          {modelList.current.map((v) => (
            <div
              key={v.id}
              onClick={() => {
                generateImgModel.current = v;
                setSelectedModel(v);
              }}
              className={`settingBox-item ${
                v.id === selectedModel.id ? "selectedModel" : ""
              }`}
            >
              <div className="settingBox_item-shwoBox">
                <img className="modelImg" src={v.icon} alt="" />
                <span className="modelTitle">{v.title}</span>
              </div>
              <div className="settingBox_item-info">{v.info}</div>
            </div>
          ))}
        </div>
      </div>

      <GetImgBase64 promptObj={promptObj}></GetImgBase64>
    </div>
  );
};

export default MjGenerateSetting;
